<template>
  <div class="scanner-container">
    <div class="records-section">
      <h2>出入库记录</h2>
      <el-table :data="scanRecords" style="width: 100%">
        <el-table-column type="index" label="序号"  />
        <el-table-column prop="rukuName" label="入库编号"  />
        <el-table-column prop="date" label="入库日期" >
          <template v-slot="scope">
            {{moment(scope.row.date).format("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { APIs } from '@/Http/http';
import moment from 'moment';

// 扫码记录
const scanRecords = ref([]);

// 组件挂载时加载数据
onMounted(() => {
  Data();
});

// 加载入库记录数据
const Data=()=>{
  APIs.get("/api/Read/ShowRuku").then(res=>{
    scanRecords.value=res.data.data;
  });
};
</script>

<style scoped>
.scanner-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.records-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.records-section h2 {
  margin: 0 0 15px 0;
  color: #333;
}
</style>